extends ./layouts/deafault
block title
 title Koa Douban 首页
block content
 include ./includes/header
 .container-fluid
  .sidebar
   .collapse.cat-links
    .sidebar-item.active
      a.sidebar-link(href='/') links
       ul.nav.sidebar-inner
        li.active.sidebar-inner-active
         a(href="/") link1
        li.sidebar-inner-active
         a(href="/") link2
  .content
   .row
    .col-md-6
     .card
      img.card-img-top(src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2544987866.webp" data-video="http://vt1.doubanio.com/201902242245/0076abf2fc0af742bb1ba75d80b836fa/view/movie/M/402410829.mp4")
      .card-body
       h4.card-title 这是电影标题
       p.card-desc 这是电影描述
      .card-footer
       small.text-muted 1天前更新
    .col-md-6
     .card
      img.card-img-top(src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2544987866.webp" data-video="http://vt1.doubanio.com/201902242245/0076abf2fc0af742bb1ba75d80b836fa/view/movie/M/402410829.mp4")
      .card-body
       h4.card-title 这是电影标题
       p.card-desc 这是电影描述
      .card-footer
       small.text-muted 1天前更新
   .row
    .col-md-6
     .card
      img.card-img-top(src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2544987866.webp" data-video="http://vt1.doubanio.com/201902242245/0076abf2fc0af742bb1ba75d80b836fa/view/movie/M/402410829.mp4")
      .card-body
       h4.card-title 这是电影标题
       p.card-desc 这是电影描述
      .card-footer
       small.text-muted 1天前更新
    .col-md-6
     .card
      img.card-img-top(src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2544987866.webp" data-video="http://vt1.doubanio.com/201902242245/0076abf2fc0af742bb1ba75d80b836fa/view/movie/M/402410829.mp4")
      .card-body
       h4.card-title 这是电影标题
       p.card-desc 这是电影描述
      .card-footer
       small.text-muted 1天前更新
  #myModal.modal.fade.bd-example-modal-lg(tabindex="-1", role="dialog", aria-labelledby="myLargeModalLabel", aria-hidden="true")
    .modal-dialog.modal-lg
      #videoModal.modal-content
 include ./includes/script
 script.
  var player=null;
  $(document).ready(function(){
    $('#myModal').on('hidden.bs.modal',function(e){
      if(player&&player.pause){
        player.pause()
      }
    })
    $('.card-img-top').click(function(e){
      var video=$(this).data('video')
      var image=$(this).attr('src')
      $('#myModal').modal('show')
      if(!player){
        player=new DPlayer({
          container:document.getElementById('videoModal'),
          screenshot:true,
          video:{
            url:video,
            pic:image,
            thumbnails:image
          }
        })
      }else{
        player.switchVideo({
          url:video,
          pic:image,
          type:'auto'
        })
      }
    })
  })

